<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Client APP Demo</title>
    <link rel="stylesheet"
          href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script
            src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script
            src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.js"></script>
<script type="application/javascript">
    $(function () {
        var headers = $("#headers").val();
        headers = eval('(' + headers + ')');
        jQuery.each(headers, function(key, val) {
            $("#InputsWrapper").append('<div name="headers-region"><label class="col-md-4 control-label" for="header"></label>' +
                '<input type="text" name="header_key" readonly  placeholder="header_key" value="'+key+'"/>&nbsp;&nbsp;' +
                '<input type="text" name="header_value" readonly  placeholder="header_value" value="'+val+'"/>&nbsp;&nbsp;' +
                '</div>');
        });

        var params = $("#params").val();
        params = eval('(' + params + ')');
        jQuery.each(params, function(key, val) {
            $("#InputsWrapper2").append('<div name="params-region"><label class="col-md-4 control-label" for="param"></label>' +
                '<input type="text" name="param_key" readonly  placeholder="param_key" value="'+key+'"/>&nbsp;&nbsp;' +
                '<input type="text" name="param_value" readonly  placeholder="param_value" value="'+val+'"/>&nbsp;&nbsp;' +
                '</div>');
        });

        $("input[name='request']").click(function () {
            var okapi_host = $("input[name='okapi_host']").val();
             var okapi_port = $("input[name='okapi_port']").val();
             var api = $("input[name='api']").val();
             var url = "http://"+okapi_host+":"+okapi_port+api;
             var method = $("input[name='method']").val();
             var body = $("textarea[name='body']").val();
             console.log(body)
             console.log(eval('(' + body + ')'))
             var methods = ["GET","POST","PUT","DELETE"];
             /*var header_keys = $("input[name='header_key']").val();
             var header_values = $("input[name='header_value']").val();
             header_keys = eval('(' + header_keys + ')');
             header_values = eval('(' + header_values + ')');
            alert(typeof header_keys);
             $.each(header_keys, function(key1, val1) {
             alert(key1+":"+val1);
             });*/
             var header_key = [];
             var header_value = [];
            $("input[name='header_key']").each(function (this1) {
                header_key.push($(this).val());
            });

            $("input[name='header_value']").each(function (this2) {
                header_value.push($(this).val());
            });
            var headers = {};
            function createJson(prop, val) {
                // 如果 val 被忽略
                if(typeof val === "undefined") {
                    // 删除属性
                    delete headers[prop];
                }
                else {
                    // 添加 或 修改
                    headers[prop] = val;
                }
            }
            for(var i in header_key){
                //alert(header_key[i]+':'+header_value[i])
                createJson(header_key[i],header_value[i]);
                console.log(headers);
                //headers.header_key[i]=header_value[i];
            }

            var param_key = [];
            var param_value = [];
            $("input[name='param_key']").each(function (this1) {
                param_key.push($(this).val());
            });

            $("input[name='param_value']").each(function (this2) {
                param_value.push($(this).val());
            });
            var params = "?";
            function createURLParams(prop, val) {
                // 如果 val 被忽略
                if(typeof val === "undefined") {
                    // 删除属性
                    //delete params[prop];
                }
                else {
                    // 添加 或 修改
                    params = params + prop+'='+val+'&';
                }
            }
            for(var i in param_key){
                //alert(header_key[i]+':'+header_value[i])
                createURLParams(param_key[i],param_value[i]);
                console.log(params);
                //headers.header_key[i]=header_value[i];
            }
            console.log(params.substr(0,params.length-1));
            $.ajax({
             url:url+params.substr(0,params.length-1),
             type:method, //GET
             async:true,    //或false,是否异步
             headers:headers,
             data:body,
             timeout:5000,    //超时时间
             dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
             beforeSend:function(xhr){
                 console.log(xhr)
                 console.log('发送前')
                 },
                 success:function(data,textStatus,jqXHR){
                 console.log(data)
                 console.log(textStatus)
                 console.log(jqXHR)
                 window.document.write(data);
                 },
                 error:function(xhr,textStatus){
                 console.log('错误')
                 console.log(xhr.statusCode())
                 console.log(textStatus)
                 },
                 complete:function(){
                 console.log('结束')
                 }
             })
        });
    })

</script>
</head>
<body>
<div class="navbar navbar-default">
    <div class="container ">
        <p class="navbar-text">Client APP Demo</p>
    </div>
</div>
<div class="container ">
    <div class="row">
        <div class="col-md-9">
            <div class="list-group">
            </div>
            <div class="list-group">
                <div class="list-group-item">
                    <form class="form-horizontal" name="pre_param_form" onsubmit="return false;"
                          target="_blank">
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="okapi_host">Okapi Host</label>
                            <div class="col-md-4">
                                <input name="okapi_host" type="text" placeholder="" readonly
                                       class="form-control input-md" value="{{okapi_host}}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="okapi_port">Okapi Port</label>
                            <div class="col-md-4">
                                <input name="okapi_port" type="text" readonly
                                       class="form-control input-md" value="{{okapi_port}}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="api">资源接口URI</label>
                            <div class="col-md-4">
                                <input name="api" type="text" placeholder="" readonly
                                       class="form-control input-md" value="{{api}}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="method">请求方法</label>
                            <div class="col-md-4">
                                <input name="method" type="text" placeholder="" readonly
                                       class="form-control input-md" value="{{method}}"/>
                            </div>
                        </div>
                        <input type="text" id="headers" name="headers" hidden value='{{headers}}'/>
                        <div class="form-group" id="InputsWrapper">
                            <label class="col-md-4 control-label" for="header">请求头</label>
                            <div name="headers-region" class="col-md-4">
                                <!--<input type="text" name="headers" placeholder="header_key" hidden="true" readonly value="{{headers}}"/>&nbsp;&nbsp;
                                <input type="text" name="header_value" id="1" placeholder="header_value" />
                                <a href="#" id="AddMoreFileBox" class="btn btn-info add">+</a>-->
                            </div>
                        </div>

                        <input type="text" id="params" hidden value='{{params}}'/>
                        <div class="form-group" id="InputsWrapper2">
                            <label class="col-md-4 control-label" for="param">URL请求行?传参</label>
                            <div class="col-md-4">
                                <!--<div name="headers-region">
                                    <input type="text" name="param_key" placeholder="param_key" />&nbsp;&nbsp;
                                    <input type="text" name="param_value" placeholder="param_value" />
                                    <a href="#" class="btn btn-info add">+</a>
                                </div>-->
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-4 control-label" for="body">请求体Body传参</label>
                            <div class="col-md-4">
									<textarea id="body" name="body" type="text" placeholder="{{body}}" readonly
                                              class="form-control input-md">{{body}}
									</textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="pre-login-btn"></label>
                            <div class="col-md-8">
                                <input id="request" name="request" type="button"
                                       class="btn btn-default btn-info request" value="访问OpenAPI资源接口"></input>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>